<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工作牌设计工具</title>
    <script src="../js/html2canvas.min.js"></script>
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --primary-gradient-hover: linear-gradient(135deg, #5a6fd1 0%, #684392 100%);
        }
        
        body {
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f9fa;
            color: #333;
        }
        
        .container {
            display: flex;
            max-width: 1400px;
            margin: 0 auto;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            overflow: hidden;
            position: relative;
            min-height: 90vh;
            margin-top: 20px;
        }
        
        .editor-panel {
            flex: 1;
            padding: 30px;
            border-right: 1px solid #eee;
        }
        
        .preview-panel {
            flex: 1;
            padding: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            position: relative;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #555;
        }
        
        input[type="text"], 
        input[type="color"],
        select,
        textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            box-sizing: border-box;
            font-size: 14px;
            transition: border-color 0.3s;
        }
        
        input[type="text"]:focus, 
        input[type="color"]:focus,
        select:focus,
        textarea:focus {
            border-color: #667eea;
            outline: none;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        button {
            background: var(--primary-gradient);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        button:hover {
            background: var(--primary-gradient-hover);
            transform: translateY(-2px);
            color: #fff;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }
        
        .badge {
            width: 320px;
            height: 480px;
            border-radius: 12px;
            position: relative;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
            transition: all 0.3s ease;
        }
        
        .badge:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0,0,0,0.15);
        }
        
        .badge-header {
            width: 100%;
            text-align: center;
            padding: 15px 0;
            margin-bottom: 25px;
            font-weight: 600;
            letter-spacing: 1px;
        }
        
        .badge-photo {
            width: 130px;
            height: 160px;
            border-radius: 8px;
            margin-bottom: 25px;
            background-color: #f9f9f9;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 1px solid #eee;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        
        .badge-photo img {
            max-width: 100%;
            object-fit: cover;
        }
        
        .badge-info {
            width: 85%;
            text-align: center;
        }
        
        .badge-info div {
            margin-bottom: 12px;
            border-bottom: 1px dashed #eee;
        }
        
        .badge-footer {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
            font-size: 12px;
            color: #777;
        }
        
        .download-btn-container {
            position: fixed;
            right: 40px;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .tab-container {
            margin-bottom: 25px;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .tab-buttons {
            display: flex;
            background: #f5f7fa;
            border-radius: 8px 8px 0 0;
        }
        
        .tab-button {
            padding: 12px 25px;
            background: transparent;
            border: none;
            cursor: pointer;
            font-weight: 500;
            color: #666;
            transition: all 0.3s;
        }
        
        .tab-button.active {
            background: var(--primary-gradient);
            color: white;
            border-radius: 8px 8px 0 0;
        }
        
        .tab-content {
            display: none;
            padding: 20px;
            border: 1px solid #eee;
            border-top: none;
            border-radius: 0 0 8px 8px;
            background: white;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .badge-id {
            position: absolute;
            top: 5px;
            left: 15px;
            background: rgba(0,0,0,0.1);
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        
        /* 新的模板选择器样式 - 横向布局 */
        .template-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .template-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
        }
        
        .template-preview {
            width: 80px;
            height: 40px;
            border-radius: 8px;
            margin-bottom: 8px;
            border: 2px solid transparent;
            transition: all 0.3s;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }
        
        .template-preview:hover {
            transform: scale(1.05);
        }
        
        .template-preview.selected {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
        }
        
        .template-label {
            font-size: 13px;
            font-weight: 500;
            color: #555;
        }
        
        /* 模板预览样式 - 新增更多样式 */
        .template-simple {
            background: linear-gradient(to bottom, #ffffff, #f5f5f5);
        }
        
        .template-professional {
            background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
        }
        
        .template-modern {
            background: linear-gradient(to bottom, #2c3e50, #4ca1af);
        }
        
        .template-creative {
            background: linear-gradient(to bottom, #ff9a9e, #fad0c4);
        }
        
        .template-corporate {
            background: linear-gradient(to bottom, #a1c4fd, #c2e9fb);
        }
        
        .template-elegant {
            background: linear-gradient(to bottom, #6a11cb, #2575fc);
        }
        
        .template-minimalist {
            background: linear-gradient(to bottom, #f5f7fa, #c3cfe2);
        }
        
        .template-vibrant {
            background: linear-gradient(to bottom, #ff758c, #ff7eb3);
        }
        
        .template-nature {
            background: linear-gradient(to bottom, #0ba360, #3cba92);
        }
        
        .template-luxury {
            background: linear-gradient(to bottom, #434343, #000000);
        }
        
        .template-tech {
            background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364);
        }

        .template-fashion {
            background: linear-gradient(to bottom, #ff4e50, #f9d423);
        }
        
        /* 加载指示器 */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            display: none;
        }
        
        .loading-spinner {
            border: 5px solid #f3f3f3;
            border-top: 5px solid #667eea;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="editor-panel">
            <div class="tab-container">
                <div class="tab-buttons">
                    <button class="tab-button active" onclick="openTab(event, 'content-tab')">内容编辑</button>
                    <button class="tab-button" onclick="openTab(event, 'style-tab')">样式编辑</button>
                </div>
                
                <div id="content-tab" class="tab-content active">
                    <div class="form-group">
                        <label for="company-name">公司名称</label>
                        <input type="text" id="company-name" placeholder="输入公司名称" oninput="updateBadge()">
                    </div>
                    
                    <div class="form-group">
                        <label for="employee-name">员工姓名</label>
                        <input type="text" id="employee-name" placeholder="输入员工姓名" oninput="updateBadge()">
                    </div>
                    
                    <div class="form-group">
                        <label for="employee-id">员工编号</label>
                        <input type="text" id="employee-id" placeholder="输入员工编号" oninput="updateBadge()">
                    </div>
                    
                    <div class="form-group">
                        <label for="department">部门</label>
                        <input type="text" id="department" placeholder="输入部门名称" oninput="updateBadge()">
                    </div>
                    
                    <div class="form-group">
                        <label for="position">职位</label>
                        <input type="text" id="position" placeholder="输入职位" oninput="updateBadge()">
                    </div>
                    
                    <div class="form-group">
                        <label for="photo">员工照片</label>
                        <input type="file" id="photo" accept="image/*" onchange="handlePhotoUpload(event)">
                    </div>
                    
                    <div class="form-group">
                        <label for="additional-info">附加信息</label>
                        <textarea id="additional-info" rows="3" placeholder="输入附加信息（如有效期、联系方式等）" oninput="updateBadge()"></textarea>
                    </div>
                </div>
                
                <div id="style-tab" class="tab-content">
                    <div class="form-group">
                        <label>选择模板</label>
                        <div class="template-selector">
                            <div class="template-option" onclick="selectTemplate('simple')">
                                <div class="template-preview template-simple selected" id="template-simple-preview"></div>
                                <div class="template-label">简约风格</div>
                            </div>
                            <div class="template-option" onclick="selectTemplate('professional')">
                                <div class="template-preview template-professional" id="template-professional-preview"></div>
                                <div class="template-label">专业风格</div>
                            </div>
                            <div class="template-option" onclick="selectTemplate('modern')">
                                <div class="template-preview template-modern" id="template-modern-preview"></div>
                                <div class="template-label">现代风格</div>
                            </div>
                            <div class="template-option" onclick="selectTemplate('creative')">
                                <div class="template-preview template-creative" id="template-creative-preview"></div>
                                <div class="template-label">创意风格</div>
                            </div>
                            <div class="template-option" onclick="selectTemplate('corporate')">
                                <div class="template-preview template-corporate" id="template-corporate-preview"></div>
                                <div class="template-label">企业风格</div>
                            </div>
                            <div class="template-option" onclick="selectTemplate('elegant')">
                                <div class="template-preview template-elegant" id="template-elegant-preview"></div>
                                <div class="template-label">优雅风格</div>
                            </div>
                            <div class="template-option" onclick="selectTemplate('minimalist')">
                                <div class="template-preview template-minimalist" id="template-minimalist-preview"></div>
                                <div class="template-label">极简风格</div>
                            </div>
                            <div class="template-option" onclick="selectTemplate('vibrant')">
                                <div class="template-preview template-vibrant" id="template-vibrant-preview"></div>
                                <div class="template-label">活力风格</div>
                            </div>
                            <div class="template-option" onclick="selectTemplate('nature')">
                                <div class="template-preview template-nature" id="template-nature-preview"></div>
                                <div class="template-label">自然风格</div>
                            </div>
                            <div class="template-option" onclick="selectTemplate('luxury')">
                                <div class="template-preview template-luxury" id="template-luxury-preview"></div>
                                <div class="template-label">奢华风格</div>
                            </div>
                            <div class="template-option" onclick="selectTemplate('tech')">
                                <div class="template-preview template-tech" id="template-tech-preview"></div>
                                <div class="template-label">科技风格</div>
                            </div>
                            <div class="template-option" onclick="selectTemplate('fashion')">
                                <div class="template-preview template-fashion" id="template-fashion-preview"></div>
                                <div class="template-label">时尚渐变</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="badge-color">背景颜色</label>
                        <input type="color" id="badge-color" value="#ffffff" oninput="updateBadge()">
                    </div>
                    
                    <div class="form-group">
                        <label for="text-color">文字颜色</label>
                        <input type="color" id="text-color" value="#000000" oninput="updateBadge()">
                    </div>
                    
                    <div class="form-group">
                        <label for="company-font-size">公司名称字体大小</label>
                        <select id="company-font-size" onchange="updateBadge()">
                            <option value="20px">小</option>
                            <option value="24px" selected>中</option>
                            <option value="28px">大</option>
                            <option value="32px">特大</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="name-font-size">姓名字体大小</label>
                        <select id="name-font-size" onchange="updateBadge()">
                            <option value="18px">小</option>
                            <option value="22px" selected>中</option>
                            <option value="26px">大</option>
                            <option value="30px">特大</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="preview-panel">
            <div class="badge" id="badge-preview">
                <div class="badge-id" id="employee-id-preview">ID: 0001</div>
                <div class="badge-header" id="company-name-preview">公司名称</div>
                <div class="badge-photo" id="badge-photo-preview">
                    <span>照片</span>
                </div>
                <div class="badge-info">
                    <div id="employee-name-preview">姓名</div>
                    <div id="position-preview">职位</div>
                    <div id="department-preview">部门</div>
                    <div id="additional-info-preview"></div>
                </div>
                <div class="badge-footer">
                    <div>请妥善保管 | 随身佩戴</div>
                </div>
            </div>
        </div>
        
        <div class="download-btn-container">
            <button onclick="exportBadge()">导出图片</button>
        </div>
    </div>

    <!-- 加载指示器 -->
    <div class="loading-overlay" id="loading-overlay">
        <div class="loading-spinner"></div>
    </div>

    <script>
        // 切换标签页
        function openTab(evt, tabName) {
            const tabContents = document.getElementsByClassName("tab-content");
            for (let i = 0; i < tabContents.length; i++) {
                tabContents[i].classList.remove("active");
            }
            
            const tabButtons = document.getElementsByClassName("tab-button");
            for (let i = 0; i < tabButtons.length; i++) {
                tabButtons[i].classList.remove("active");
            }
            
            document.getElementById(tabName).classList.add("active");
            evt.currentTarget.classList.add("active");
        }
        
        // 更新工作牌预览
        function updateBadge() {
            const companyName = document.getElementById("company-name").value || "公司名称";
            const employeeName = document.getElementById("employee-name").value || "姓名";
            const employeeId = document.getElementById("employee-id").value || "0001";
            const department = document.getElementById("department").value || "部门";
            const position = document.getElementById("position").value || "职位";
            const additionalInfo = document.getElementById("additional-info").value;
            
            document.getElementById("company-name-preview").textContent = companyName;
            document.getElementById("employee-name-preview").textContent = employeeName;
            document.getElementById("employee-id-preview").textContent = "ID: " + employeeId;
            document.getElementById("department-preview").textContent = "部门: " + department;
            document.getElementById("position-preview").textContent = "职位: " + position;
            document.getElementById("additional-info-preview").textContent = additionalInfo;
            
            // 更新样式
            const badgeColor = document.getElementById("badge-color").value;
            const textColor = document.getElementById("text-color").value;
            const companyFontSize = document.getElementById("company-font-size").value;
            const nameFontSize = document.getElementById("name-font-size").value;
            
            const badgePreview = document.getElementById("badge-preview");
            badgePreview.style.backgroundColor = badgeColor;
            badgePreview.style.color = textColor;
            
            document.getElementById("company-name-preview").style.fontSize = companyFontSize;
            document.getElementById("employee-name-preview").style.fontSize = nameFontSize;
        }
        
        // 处理照片选择
        function handlePhotoUpload(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const photoPreview = document.getElementById("badge-photo-preview");
                    photoPreview.innerHTML = `<img src="${e.target.result}" alt="员工照片">`;
                };
                reader.readAsDataURL(file);
            }
        }
        
        // 选择模板
        function selectTemplate(template) {
            // 更新模板预览选择状态
            document.querySelectorAll('.template-preview').forEach(el => {
                el.classList.remove('selected');
            });
            document.getElementById(`template-${template}-preview`).classList.add('selected');
            
            const badgePreview = document.getElementById("badge-preview");
            
            switch(template) {
                case "simple":
                    badgePreview.style.background = "linear-gradient(to bottom, #ffffff, #f5f5f5)";
                    badgePreview.style.color = "#333";
                    document.getElementById("badge-color").value = "#ffffff";
                    document.getElementById("text-color").value = "#333333";
                    break;
                case "professional":
                    badgePreview.style.background = "linear-gradient(to bottom, #f8f9fa, #e9ecef)";
                    badgePreview.style.color = "#333";
                    document.getElementById("badge-color").value = "#f8f9fa";
                    document.getElementById("text-color").value = "#333333";
                    break;
                case "modern":
                    badgePreview.style.background = "linear-gradient(to bottom, #2c3e50, #4ca1af)";
                    badgePreview.style.color = "#fff";
                    document.getElementById("badge-color").value = "#2c3e50";
                    document.getElementById("text-color").value = "#ffffff";
                    break;
                case "creative":
                    badgePreview.style.background = "linear-gradient(to bottom, #ff9a9e, #fad0c4)";
                    badgePreview.style.color = "#333";
                    document.getElementById("badge-color").value = "#ff9a9e";
                    document.getElementById("text-color").value = "#333333";
                    break;
                case "corporate":
                    badgePreview.style.background = "linear-gradient(to bottom, #a1c4fd, #c2e9fb)";
                    badgePreview.style.color = "#333";
                    document.getElementById("badge-color").value = "#a1c4fd";
                    document.getElementById("text-color").value = "#333333";
                    break;
                case "elegant":
                    badgePreview.style.background = "linear-gradient(to bottom, #6a11cb, #2575fc)";
                    badgePreview.style.color = "#fff";
                    document.getElementById("badge-color").value = "#6a11cb";
                    document.getElementById("text-color").value = "#ffffff";
                    break;
                case "minimalist":
                    badgePreview.style.background = "linear-gradient(to bottom, #f5f7fa, #c3cfe2)";
                    badgePreview.style.color = "#333";
                    document.getElementById("badge-color").value = "#f5f7fa";
                    document.getElementById("text-color").value = "#333333";
                    break;
                case "vibrant":
                    badgePreview.style.background = "linear-gradient(to bottom, #ff758c, #ff7eb3)";
                    badgePreview.style.color = "#fff";
                    document.getElementById("badge-color").value = "#ff758c";
                    document.getElementById("text-color").value = "#ffffff";
                    break;
                case "nature":
                    badgePreview.style.background = "linear-gradient(to bottom, #0ba360, #3cba92)";
                    badgePreview.style.color = "#fff";
                    document.getElementById("badge-color").value = "#0ba360";
                    document.getElementById("text-color").value = "#ffffff";
                    break;
                case "luxury":
                    badgePreview.style.background = "linear-gradient(to bottom, #434343, #000000)";
                    badgePreview.style.color = "#fff";
                    document.getElementById("badge-color").value = "#434343";
                    document.getElementById("text-color").value = "#ffffff";
                    break;
                case "tech":
                    badgePreview.style.background = "linear-gradient(to bottom, #0f2027, #203a43, #2c5364)";
                    badgePreview.style.color = "#fff";
                    document.getElementById("badge-color").value = "#0f2027";
                    document.getElementById("text-color").value = "#ffffff";
                    break;
                    case "fashion":
                    badgePreview.style.background = "linear-gradient(to bottom, #ff4e50, #f9d423)";
                    badgePreview.style.color = "#fff";
                    document.getElementById("badge-color").value = "#ff4e50";
                    document.getElementById("text-color").value = "#ffffff";
                    break;
            }
            
            updateBadge();
        }
        
        // 导出工作牌为高清图片
        function exportBadge() {
            const loadingOverlay = document.getElementById('loading-overlay');
            const badgePreview = document.getElementById('badge-preview');
            
            // 显示加载指示器
            loadingOverlay.style.display = 'flex';
            
            // 临时移除悬停效果
            const originalTransform = badgePreview.style.transform;
            const originalBoxShadow = badgePreview.style.boxShadow;
            badgePreview.style.transform = 'none';
            badgePreview.style.boxShadow = 'none';
            
            // 使用html2canvas导出高清图片
            html2canvas(badgePreview, {
                scale: 3, // 提高缩放比例以获得更高清的图片
                logging: false,
                useCORS: true,
                allowTaint: true,
                backgroundColor: null
            }).then(canvas => {
                // 恢复样式
                badgePreview.style.transform = originalTransform;
                badgePreview.style.boxShadow = originalBoxShadow;
                
                // 创建下载链接
                const link = document.createElement('a');
                link.download = '工作牌_' + (document.getElementById('employee-name').value || '员工') + '.png';
                link.href = canvas.toDataURL('image/png');
                
                // 隐藏加载指示器
                loadingOverlay.style.display = 'none';
                
                // 触发下载
                link.click();
            }).catch(err => {
                console.error('导出图片时出错:', err);
                loadingOverlay.style.display = 'none';
                alert('导出图片时出错，请重试');
            });
        }
        
        // 初始化
        updateBadge();
    </script>
</body>
</html>